<template>
    <title :title="noticeTitle" :more="true" target-url="/pages/parkActivities/index"></title>
    <view class="notice">
        <view v-if="noticeData.length">
            <!-- <view class="noticeList" v-for="(item, index) in noticeData" :key="index" @click="detail(item)">
                <view class="information">
                    <view class="spot"><span>·</span></view>
                    <view class="name">
                        {{ item.title }}
                    </view>
                </view>
                <view class="dateTime">
                    {{ formatTime(item.publish_date) }}
                </view>
            </view> -->
            <view class="parkActivitiesList" v-for="(item, index) in noticeData" :key="index" @click="detail(item)">
                <image v-if="item.cover" :src="item.cover" mode=""></image>
                <image v-else src="../../static/images/20170510104938756.png" mode="aspectFill"></image>
                <view class="backView">
                    <view class="name">
                        {{ formatDate(item.publish_date) }}活动
                    </view>
                    <view class="concise">
                        <span>
                            {{ formatTime(item.publish_date) }}
                        </span>
                        <span> | </span>
                        <span> {{ item.title }}</span>
                    </view>
                </view>
                <!-- <view class="state" :class="{
					state1:item.state == 1,
					state2:item.state == 2,
					state3:item.state == 3
					state1: item.state == 1,
					state2: item.state == 2,
					state3: item.state == 3
				}"></view> -->
                <view class="state" :class="activityStatus(item)"></view>
            </view>
        </view>

        <up-empty v-else mode="data" iconSize="40rpx" text="暂无园区通知信息">
        </up-empty>

    </view>
</template>

<script>
import dayjs from 'dayjs';
import title from '@/components/title/index.vue'
import { getCategoryList } from '@/api/api.js'
export default {
    name: 'ParkNotice',
    components: {
        title
    },
    data() {
        return {
            noticeTitle: '园区活动',
            noticeData: []
        }
    },
    created() {
        this.getNoticeData()
    },
    methods: {
        // 获取园区通知数据
        async getNoticeData() {
            try {
                const data = {
                    category_name: '园区活动',
                    limit: 3,
                    page: 1
                }
                const res = await getCategoryList(data);
                if (res.code == 2000) {
                    this.noticeData = res.data.data;

                    console.log(this.noticeData);
                }
            } catch (error) {
                console.log(error);
            }
        },
        detail(item) {
            uni.setStorageSync('currentData', { item: item, isTitle: false })
            uni.navigateTo({
                url: '/pages/parkActivities/eventDetails'
            })
        },
        formatTime(time) {
            return dayjs(time).format('YYYY年MM月DD日');
        },
        formatDate(date) {
            const inputDate = dayjs(date); // 输入日期
            const currentDate = dayjs();  // 当前日期

            if (inputDate.isSame(currentDate, 'month')) {
                return '当月';
            } else if (inputDate.isSame(currentDate.subtract(1, 'month'), 'month')) {
                return '上月';
            } else if (inputDate.isBefore(currentDate.startOf('month'))) {
                return '历史';
            } else if (inputDate.isSame(currentDate.add(1, 'month'), 'month')) {
                return '下月';
            } else {
                return '未来';
            }
        },
        activityStatus(row) {
            const now = dayjs(); // 获取当前时间
            const startTime = dayjs(row.activity_start_time);
            const endTime = dayjs(row.activity_end_time);

            if (!row.activity_start_time || !row.activity_end_time) {
                return "state3";
            } else if (now.isBefore(startTime)) {
                return 'state1';
            } else if (now.isAfter(endTime)) {
                return 'state3';
            } else {
                return 'state2';
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.notice {
    height: auto;
    // background-color: #fefefe;
    border-radius: 10rpx;
    // box-shadow: 3rpx 3rpx 15rpx 1rpx rgba(0, 0, 0, 0.1);
    // padding: 30rpx;

    // .noticeList {
    //     margin-bottom: 25rpx;

    //     .information {
    //         display: flex;
    //         align-items: center;

    //         .spot {
    //             width: 15rpx;
    //             font-weight: bold;
    //             color: #ff4542;
    //             margin-right: 5rpx;
    //         }

    //         .name {
    //             font-size: 25rpx;
    //             font-weight: bold;
    //             color: #2d2a31;
    //             white-space: nowrap;
    //             overflow: hidden;
    //             text-overflow: ellipsis;
    //         }
    //     }

    //     .dateTime {
    //         margin-top: 10rpx;
    //         font-size: 22rpx;
    //         color: #9097ba;
    //         text-indent: 1em;
    //     }
    // }

    // .noticeList:last-child {
    //     margin-bottom: 0;
    // }
}

.parkActivitiesList {
    margin-bottom: 10rpx;
    position: relative;
    height: 300rpx;
    overflow: hidden;
    border-radius: 15rpx;

    image {
        width: 100%;
        height: 100%;
    }

    .backView {
        position: absolute;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        color: #f6f2f1;
        width: 100%;
    }

    .name {
        padding: 20rpx 30rpx;
        font-weight: bold;
        font-size: 23rpx;
        // 溢出隐藏点点点
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .concise {
        font-weight: bold;
        font-size: 20rpx;
        padding: 0rpx 30rpx 20rpx 30rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .parkActivitiesList:last-child {
        margin-bottom: 0;
    }

    .state {
        width: 150rpx;
        height: 150rpx;
        position: absolute;
        right: -5rpx;
        top: -5rpx;
    }

    .state1 {
        background-image: url('../../static/home/notStartedYet.svg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .state2 {
        background-image: url('../../static/home/haveInHand.svg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .state3 {
        background-image: url('../../static/home/ended.svg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}
</style>